<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义特征</title>
</head>
<body>
    <div class="hdcms" data-content="后盾人" data-color="red">hdcms.com</div>

    <div class="houdunren" data-title-color="red">houdunren</div>

    <script>
        //自定义特征
        //虽然可以随时定义特征并使用getAttribute等方法进行管理,很容易造成与标签
        //的现在或者未来的属性重名,建议使用data-作为前缀的自定义特征处理
        //针对这种方式定义js也提供了接口方便操作
        //元素中以data- 为前缀的属性会添加到属性集中
        //使用元素的dataset可以获取属性集中的属性
        //改变dataset的值会影响到元素上
        // let hdcms = document.querySelector('.hdcms');
        // let data = hdcms.dataset;
        // //获取content
        // // console.log(hdcms.dataset.content);
        // // console.log(hdcms.dataset.color);
        // hdcms.innerHTML = `<span style="color:${hdcms.dataset.color}">${hdcms.dataset.content}</span>`;
        

        // //多个单词的特征使用驼峰命名的方式读取
        // let houdunren = document.querySelector('.houdunren');
        // console.log(houdunren.dataset.titleColor);
        // houdunren.innerHTML = `
        //     <span style="color:${houdunren.dataset.titleColor}">${houdunren.innerHTML}</span>
        // `;

        //改变dataset的值也会影响到页面上
        // let houdunren = document.querySelector('.houdunren');
        // houdunren.addEventListener('click',function(){
        //     this.dataset.titleColor = ['red','green','blue'][Math.floor(Math.random() * 3)];
        //     this.style.color = this.dataset.titleColor;
        // });



    

    </script>

</body>
</html>